import React, { useEffect, useState } from 'react';
import { Col } from 'antd';
import { AxInput } from '@/components/AxForm/AxFormItem';
import { axhttp } from '@/shared/axhttp';

/** 修改姓名、身份证
 * @param form 表单
 * @param url 请求地址
 * @param setDescription 设置内容的方法
 * @param studentStatusId 学生在校Id
 */
export const NameIdcard = ({ form, url, setDescription, studentStatusId }: any) => {
    const [oldData, setOldData] = useState<any>({});
    const { getX } = axhttp;

    useEffect(() => {
        studentStatusId && getX(url.readStudentInfo, { studentId: studentStatusId }).then((res: any) => {
            setOldData(res.data);
        });
    }, [studentStatusId]);

    const handleBlurName = (e: any) => {
        handleChangeInfo({ name: e.target.value });
    }

    const handleBlurIdcard = (e: any) => {
        handleChangeInfo({ idcard: e.target.value });
    }

    /** 变更信息 */
    const handleChangeInfo = (obj: any) => {
        const name = obj.hasOwnProperty('name')
            ? obj.name
            : form.getFieldValue('newName');
        const idcard = obj.hasOwnProperty('idcard')
            ? obj.idcard
            : form.getFieldValue('newIdCard');

        let changeInfo = '';
        if (name && name !== oldData.name) {
            changeInfo += `原姓名：${oldData.name}，`;
            changeInfo += `新姓名：${name}；`;
        }
        if (idcard && idcard !== oldData.idCard) {
            changeInfo += `原身份证：${oldData.idCard}，`;
            changeInfo += `新身份证：${idcard}；`;
        }
        setDescription(changeInfo);
    }

    return (
        <>
            <Col span={8}>
                <AxInput form={form} label="姓名" field="newName" value={oldData.name} onBlur={handleBlurName} required />
            </Col>
            <Col span={8}>
                <AxInput form={form} label="身份证" field="newIdCard" value={oldData.idCard} onBlur={handleBlurIdcard} required />
            </Col>
        </>
    )
};